<template>
  <div class="m-2 mr-0 overflow-hidden bg-white">
    <BasicTree
title="场景配置" treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" :clickRowToExpand="false"
      :treeData="treeData" :actionList="actionList" :treeHeaderAction="treeHeaderAction"
      :fieldNames="{ key: 'id', title: 'name' }" @select="handleSelect" />
    <ScenceFloorModal @register="registerFloorModal" @success="handleSuccess" />
    <ScenceBuildingModal @register="registerBuildingModal" @success="handleSuccess" />
  </div>

</template>
<script lang="ts" setup>
import { onMounted, ref, h, createVNode } from 'vue';
import { BasicTree, TreeActionItem, TreeItem } from '@/components/Tree';
import { deleteScence, getScenceTree } from '@/api/collection/scence';
import { EditOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue';
import { useModal } from '@/components/Modal/index';
import ScenceFloorModal from './ScenceFloorModal.vue'
import ScenceBuildingModal from './ScenceBuildingModal.vue'

defineOptions({ name: 'ScenceTree' });

const emit = defineEmits(['select']);

const treeData = ref<TreeItem[]>([]);
const [registerFloorModal, { openModal: openFloorModal }] = useModal()
const [registerBuildingModal, { openModal: openBuildingModal }] = useModal()

async function fetch() {
  const res = await getScenceTree()
  const formateRes = addCopyName(res)
  treeData.value = (formateRes) as unknown as TreeItem[];
}

function addCopyName(arr) {
  return arr.map(item => {
    if (item.children && item.children.length) {
      addCopyName(item.children)
    }
    item.nameCopy = item.name
    return item
  })
}

function handleSelect(keys, v) {
  // console.log('选择了菜单...', keys, v);
  keys[0] && emit('select', { id: keys[0], record: v.node });
}

async function handleSuccess(params) {
  if (params) {
    // console.log('handlesuccess', params);
    emit('select', { id: params.id, record: params })
  }
  await fetch()
}

const actionList: TreeActionItem[] = [
  {
    render: (node) => {
      if (node.children)
        return h(PlusOutlined, {
          class: 'ml-2',
          onClick: (e) => {
            e.stopPropagation()
            handleFloorAdd(node)
          },
        });
    },
  },
  {
    render: (node) => {
      if (!node.children)
        return h(EditOutlined, {
          class: 'ml-2',
          onClick: (e) => {
            e.stopPropagation()
            handleFloorEdit(node)
          },
        }); else {
        return h(EditOutlined, {
          class: 'ml-2',
          onClick: (e) => {
            e.stopPropagation()
            handleBuildingEdit(node)
          },
        });
      }
    },
  },
  {
    render: (node) => {
      return h(DeleteOutlined, {
        class: 'ml-2',
        onClick: (e) => {
          e.stopPropagation()
          showConfirm(node)
        },
      });
    },
  },
];

const treeHeaderAction = () => {
  openBuildingModal(true, {
    isUpdate: false,
  });
};

const handleBuildingEdit = (node) => {
  openBuildingModal(true, {
    isUpdate: true,
    node,
  });
}


const handleFloorAdd = (node) => {
  openFloorModal(true, {
    isUpdate: false,
    node,
  });
}

const handleFloorEdit = (node) => {
  openFloorModal(true, {
    isUpdate: true,
    node,
  });
}

const handleDelete = async (node) => {
  await deleteScence({ id: node.id })
  fetch()
}

const showConfirm = (node) => {
  if (node.children && node.children.length) {
    console.log('该楼层下有子项，无法删除');
    return;
  }
  Modal.confirm({
    title: '确认删除该楼层?',
    icon: createVNode(DeleteOutlined),
    // content: 'When clicked the OK button, this dialog will be closed after 1 second',
    onOk() {
      handleDelete(node);
    },
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    onCancel() { },
  });
};

onMounted(() => {
  fetch();
});
</script>
